<template>
  <el-card class="box-card">
    <div class="header">
      <el-input
        v-model="listQuery.id"
        placeholder="id"
        size="small"
        style="width: 300px;"
        class="filter-item"
        @keyup.enter.native="submitQuery"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="submitQuery"
      >搜索</el-button>
      <el-button
        class="filter-item"
        size="small"
        icon="el-icon-delete"
        type="default"
        style="margin-left:0;"
        @click="clearQuery"
      >清空</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="#" min-width="80px" align="center">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日志类型" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日志标题" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务ID" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.clientId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建者" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createBy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="310px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button
            type="success"
            icon="el-icon-view"
            size="mini"
            @click="showViewDialog(row.id)"
            plain
          >查看</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteHandle(row.id)"
            plain
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="titleMap[dialogStatus]"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible"
    >
      <div class="dialogBody">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            :disabled="!(dialogStatus ==='update' || dialogStatus ==='create')"
          >
            <el-row>
              <el-col :xs="24" :md="12">
                <el-form-item label="日志类型" prop="type">
                  <el-input v-model="form.type" placeholder="请输入日志类型"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="日志标题" prop="title">
                  <el-input v-model="form.title" placeholder="请输入日志标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="请求URI" prop="requestUri">
                  <el-input v-model="form.requestUri" placeholder="请输入请求URI"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="操作方式" prop="method">
                  <el-input v-model="form.method" placeholder="请输入操作方式"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="服务ID" prop="clientId">
                  <el-input v-model="form.clientId" placeholder="请输入服务ID"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="创建者" prop="createBy">
                  <el-input v-model="form.createBy" placeholder="请输入创建者"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="创建时间" prop="createTime">
                  <el-input v-model="form.createTime" placeholder="请输入创建时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="12">
                <el-form-item label="IP地址" prop="remoteAddr">
                  <el-input v-model="form.remoteAddr" placeholder="请输入操作IP地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="用户代理" prop="userAgent">
                  <el-input type="textarea" v-model="form.userAgent" placeholder="请输入用户代理"></el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :md="24">
                <el-form-item label="提交数据" prop="params">
                  <el-input type="textarea" v-model="form.params" placeholder="请输入操作提交的数据"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="执行时间" prop="time">
                  <el-input type="textarea" v-model="form.time" placeholder="请输入执行时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="异常信息" prop="exception">
                  <el-input type="textarea" v-model="form.exception" placeholder="请输入异常信息"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="所属租户" prop="tenantId">
                  <el-input type="textarea" v-model="form.tenantId" placeholder="请输入所属租户"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="请求时长" prop="processTime">
                  <el-input type="textarea" v-model="form.processTime" placeholder="请输入请求时长"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </el-card>
</template>
<script>
import { page, findById, save, deleteById, updateById } from "@/api/log";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { error } from "util";

export default {
  name: "SysLog",
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        descs: 'create_time',
        id: undefined
      },
      dialogFormVisible: false,
      downloadLoading: false,
      titleMap: {
        update: "编辑",
        create: "新增",
        view: "查看"
      },
      dialogStatus: "",
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    submitQuery() {
      this.listQuery.current = 1;
      this.getList();
    },
    clearQuery() {
      this.listQuery.id = undefined;
      this.submitQuery();
    },
    showCreateDialog() {
      this.resetForm();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.form = {};
    },
    showViewDialog(id) {
      this.resetForm();
      this.dialogStatus = "view";
      findById(id).then(response => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    showUpdateDialog(id) {
      this.resetForm();
      this.dialogStatus = "update";
      findById(id).then(response => {
        this.form = response.data;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
      this.dialogFormVisible = true;
    },
    deleteHandle(id) {
      let me = this;
      this.$confirm("是否删除这条数据？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteById(id).then(() => {
          me.getList();
        });
      });
    },
    resetForm() {
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  margin: 10px 8px;
  padding: 0;
}

.header {
  margin-bottom: 10px;
}

.dialogBody {
  height: 400px;
  overflow: hidden;
}

.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-vertical {
  right: 0px;
}

.el-scrollbar {
  height: 100%;
}
</style>
